今天我們要讓網頁能聽懂使用者的輸入！

今日的目標：

• 了解表單（form）的基本結構
• 學會取得輸入值（value）
• 處理表單送出事件（submit）
• 實作基本驗證與錯誤提示
• 認識 FormData，快速收集整份表單資料

1.表單的結構

先來看一個簡單的 HTML 表單：

<form id="loginForm">
  <label>帳號：</label>
  <input type="text" id="username" name="username" />

  <label>密碼：</label>
  <input type="password" id="password" name="password" />

  <button type="submit">登入</button>
</form>

<p id="error" style="color:red"></p>

• 這裡有兩個輸入框（帳號、密碼），以及一個提交按鈕。
• name 屬性很重要，它是表單傳送時的「欄位名稱」。
• p id="error" 只是預留顯示錯誤訊息的地方。

2.取得輸入值

想要讀取輸入框裡的內容，我們可以用 .value 屬性：

const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
console.log(username, password);

.value 就是使用者輸入的字串。

3.表單提交事件submit

當使用者按下「登入」按鈕時，表單會嘗試重新整理頁面並送出資料。
但我們通常會先攔截下來，自己驗證資料是否正確。

const form = document.getElementById("loginForm");
const errorMsg = document.getElementById("error");

form.addEventListener("submit", function (event) {
  event.preventDefault(); // 阻止預設的重新整理行為

  const username = form.username.value.trim();
  const password = form.password.value.trim();

  if (username === "" || password === "") {
    errorMsg.textContent = "請輸入帳號與密碼！";
    return;
  }

  errorMsg.textContent = ""; // 清空錯誤訊息
  console.log("登入中...", username, password);
});

event.preventDefault()：防止表單「自動送出」與頁面重整。
trim()：去除多餘空白，防止使用者輸入一堆空格。
驗證邏輯：若帳號或密碼空白，就顯示錯誤訊息並用return退出。

4.表單是一種特別的 DOM 物件

為什麼我們上面可以寫form.username.value呢？
其實表單是一種特別的 DOM 物件喔！

當我們用 JS 抓取這個表單：

const form = document.getElementById("loginForm");

這個 form 不是普通的元素，它是個 HTMLFormElement，
而這個物件有個「小魔法」：它會自動把裡面所有有 name 屬性的欄位，變成它的屬性！
也就是說 form.username 會從 form 裡找 name="username" 的欄位

如果你的表單欄位都有 id：用 querySelector("#id") 也行，很通用、容易懂。

document.querySelector("#username").value

但如果你的欄位很多（像註冊表單十幾個）：用 form.username 比較乾淨！

form.username.value

尤其當你已經先抓了 const form = document.querySelector("form");
就不用重複寫整串 selector。

5.使用 FormData 收集資料

如果表單欄位多，用 .value 一個一個抓太麻煩，
這時候可以用 FormData ~

const formData = new FormData(form);
for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

FormData(form)：自動抓取表單裡所有 name 屬性欄位。
.entries()：可用迴圈列出所有資料。
也能用在 fetch 傳送資料時，非常方便！